<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 
			如果要在移动端展示web页面，那就要在元标签（meta）中设置视口缩放比例
			metavp
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>媒体查询基本语法</title>
	</head>
	<style>
		
		/* 按钮默认隐藏 */
		.btn{
			display: none;
		}
		
		
		/* 媒体查询 screen=电脑显示器*/
		@media screen and (max-width: 600px) {   
			/*
				width: 600px 是 等于600； 
				max-width: 600px   范围是0-600px; 
				min-width: 600px    范围是600px-无穷大  */
			.btn{
				display: block;
			}
			/* 隐藏菜单 */
			.nav{
				display: none;
			}
			/* 鼠标悬停时显示菜单 */
			.main:hover .nav{
				display: block;
				color: red;
			}
		}
		
		
	</style>
	
	
	<body>
		
		<div class="main">
			<button class="btn">三</button>
			<div class="nav">
				<div>001</div>
				<div>002</div>
				<div>003</div>
				<div>004</div>
				<div>005</div>
			</div>
		</div>
	</body>
</html>